<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Home</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="index.css"/>
    <link href="../Font-Awesome-3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <!--[if IE]>
    <link href="../Font-Awesome-3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet"/>
    <![endif]-->
</head>
<body>

<header>
    <nav class="navBar">
        <a><b>Snapshot</b></a>
        <ul>
            <li class="home">home</li>
            <li>about</li>
            <li>gallery</li>
            <li>contact</li>
        </ul>
    </nav>
    <div class="banner"></div>
    <section>
        <div class="bg_black">
            <a>Let's take a snapshot</a>
            <p>Snapshot website template is available for free download. Anyone can modify and use it for any site.<br>
                Please tell your friends about
                <small>templatemo</small>
                . Thank you.
            </p>
            <button>Learn more</button>
        </div>
    </section>
</header>

<section class="mid_comtact">
    <section class="white_div">
        <h1>BACKGROUND</h1>
        <p>
            Quisque tempor bibendum dolor at volutpat. Suspendisse venenatis<br>
            quam sed libero euismod feugiat. In cursus nisi vitae lectus facilisis<br>
            mollis. Nullam scelerisque, quam nec iaculis vulputate.
        </p>
        <div class="out_circle">
            <img src="images/about-img.jpg">

        </div>
    </section>
    <section class="snapshot">
        <h1>Snapshot Team</h1>
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <figure>
            <div class="out-white-img">
                <img src="images/team-img1.jpg"/>
                <h2>Mary, CEO</h2>
                <p>Aliquam ac justo est. Praesent feugiat cursus est.</p>
            </div>
            <div class="out-white-img">
                <img src="images/team-img2.jpg"/>
                <h2>Jack, Founder</h2>
                <p>Maecenas sed diam eget risus varius blandit sit non.</p>
            </div>
            <div class="out-white-img">
                <img src="images/team-img3.jpg"/>
                <h2>Linda, Manager</h2>
                <p>Phasellus nec ante in nunc molestie tincidunt ut eu diam.</p>
            </div>
            <div class="out-white-img">
                <img src="images/team-img4.jpg"/>
                <h2>Linda, Manager</h2>
                <p>Phasellus nec ante in nunc molestie tincidunt ut eu diam.</p>
            </div>
            <div class="out-white-img">
                <img src="images/team-img5.jpg"/>
                <h2>Linda, Manager</h2>
                <p>Phasellus nec ante in nunc molestie tincidunt ut eu diam.</p>
            </div>
            <div class="out-white-img">
                <img src="images/team-img6.jpg"/>
                <h2>Linda, Manager</h2>
                <p>Phasellus nec ante in nunc molestie tincidunt ut eu diam.</p>
            </div>
            <div class="out-white-img">
                <img src="images/team-img7.jpg"/>
                <h2>Linda, Manager</h2>
                <p>Phasellus nec ante in nunc molestie tincidunt ut eu diam.</p>
            </div>
            <div class="out-white-img">
                <img src="images/team-img8.jpg"/>
                <h2>Linda, Manager</h2>
                <p>Phasellus nec ante in nunc molestie tincidunt ut eu diam.</p>
            </div>
            <div class="out-white-img">
                <img src="images/team-img1.jpg"/>
                <h2>Linda, Manager</h2>
                <p>Phasellus nec ante in nunc molestie tincidunt ut eu diam.</p>
            </div>
            <ul class="changing-over">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </figure>
    </section>
</section>

<section class="bg-white-div">
    <h1>Gallery</h1>
    <p>Nullam scelerisque, quam nec iaculis vulputate, arcu ligula sollicitudin nisl, ac volutpat erat nulla a arcu.</p>
    <figure>
        <img src="images/gallery-img1.jpg">
        <img src="images/gallery-img2.jpg">
        <img src="images/gallery-img3.jpg">
        <img src="images/gallery-img4.jpg">
    </figure>
</section>
<footer>
    <div class="footer-text">
        <h1>Send a message</h1>
        <p>Nunc suscipit ante in lectus laoreet, nec pharetra diam dictum. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. </p>
    </div>

    <div class="input-text">
        <input type="text" placeholder="Name"/>
        <input type="text" placeholder="Email"/><br>
        <textarea placeholder="Message"></textarea>
        <input type="button" value="SEND MESSAGE">
    </div>
    <div id="icon-img">
            <span>
                <a class="icon-f"></a>
            </span>
        <span>
                <a class="icon-t"></a>
            </span>
        <span>
                <a class="icon-in"></a>
            </span>
        <span>
                <a class="icon-c"></a>
            </span>
        <span>
                <a class="icon-g"></a>
            </span>

    </div>
    <p class="register">Copyright © 2016 Snapshot Studio |
        More Templates - Collect from </p>
</footer>

<script src="../jquery-2.1.1.js"></script>
<script src="index.js"></script>
</body>
</html>